<template>
	<view class="page" style="background-color: white;">
		<cu-custom bgColor="bg-green" :isBack="true">
			<block slot="content"> <text class="text-white">专家知识</text></block>
		</cu-custom>
		<!-- 导航栏 -->
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center bg-green">
				<view class="cu-item flex-sub" v-for="(item,index) in cropList" :key="index" :class="item.id==TabCur?'text-green cur':''"
				 @tap="tabSelect" :data-id="item.id">
					<text class="text-lg text-bold text-white">{{item.name}}</text>
				</view>
			</view>
		</scroll-view>

		<view class="cu-bar bg-white solid-bottom shadow">
			<view class="action">
				<text class="cuIcon-title text-cyan"></text> 专家知识目录
			</view>
		</view>

		<!--列表 -->
		<view style="background-color: #f5f5f5;overflow: hidden;">
			<view class="all">
				<view class="sheng">
					<!-- 显示栏 -->
					<view class="title">
						<scroll-view scroll-x @scroll="scroll" style="width: 100%;white-space: nowrap;" :scroll-left="scrollLeft">
							<view v-for="(item,index) in parent" style="display:inline-block" :key="index">
								<view style='display:inline-block' v-if="index==0" @click="backTree(item,-1)">
									<text v-if="index==parent.length-1" class="text-black text-bold">全部</text>
									<text v-else class="text-green text-bold">全部</text>
								</view>
								<view style='display:inline-block' @click="backTree(item,index)" v-if="index!=0">
									<text style='display:inline-block;margin: 0 6px;color: #D0D4DB;font-size: 14px;' v-if="index!=0" class="cuIcon-right"></text>
									<text style='display:inline-block' v-if="index==parent.length-1" class="text-black text-bold" :data-id="item.id">
										{{item.name}}
									</text>
									<text style='display:inline-block' v-else class="text-green text-bold" :data-id="item.id">
										{{item.name}}
									</text>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="common" v-for="(item, index) in tree" @click="toChildren(item)" :key="index">
						<label class="content" :data-id="item.id" :data-target="item.hasChildren">
							<view class="word padding-left">{{item.name}}</view>
							<view class="right" v-if="item.hasChildren">
								<text class="cuIcon-right"></text>
							</view>
						</label>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import cuCustom from "../../plugin/colorui/components/cu-custom.vue";
	export default {
		data() {
			return {
				TabCur: "",
				cropList: [],
				//列表数据
				scrollLeft: 999,
				old: {
					scrollTop: 0
				},
				parent: [1],
				loadIds: [],
				loadTree: {},
				tree: []
			}
		},

		onLoad: function(option) {
			this.getCropList()
		},
		methods: {
			//导航栏索引更换
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.getData(this.TabCur, "")
				this.parent = [1]
				//console.log(this.TabCur)
			},

			scroll: function(e) {
				//console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			//到下一级
			toChildren(item) {
				if (item.hasChildren) { //item.hasChildren==true
					this.loadData(item.id)
				} else {
					uni.navigateTo({
						url: './njxx_content?contentType=knowledge&id=' + item.id,
					})
				}
				this.parent.push(item)
				//console.log(this.parent)
			},
			//返回其它层
			backTree(item, index) {
				let that = this;
				if (index == -1) {
					this.parent.splice(1, 6666)
					this.tree = this.loadTree[""]
				} else { //存在
					var t = this
					if (this.parent.length - index > 2) {
						this.parent.forEach((item, i) => {
							if (i > index) {
								this.parent.splice(i, 6666)
							}
						})
					} else if (index == this.parent.length - 1) {
						//console.log('不操作')
					} else {
						this.parent.splice(this.parent.length - 1, 1)
					}
					var val = this.parent[this.parent.length - 1].id
					this.tree = this.loadTree[val]
				}
			},
			getCropList() {
				var that = this
				uni.request({
					url: this.$config.apiUrl + '/cropController/getAllCrops',
					success: (res) => {
						if (res.data.ok) {
							if (res.data.data != null && res.data.data.length > 0) {
								that.cropList = res.data.data
								//console.log(that.cropList)
							}
						} else {
							uni.showModal({
								title: '提示',
								content: "获取目录列表失败",
								showCancel: false
							});
						}
					},
					fail() {
						uni.showModal({
							title: '提示',
							content: "获取目录列表失败",
							showCancel: false
						});
					}
				});
			},
			getData(cropid, parentid) {
				var that = this
				var list = []
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: this.$config.apiUrl + '/expertknowledgeController/getKnowledgeList?cropid=' + cropid +
						'&parentid=' + parentid,
					success: (res) => {
						uni.hideLoading();
						if (res.data.ok) {
							if (res.data.data != null) {
								var item = res.data.data
								for (var i in item) {
									item[i].pid = parentid
									if (item[i].hasChildren == "true") {
										item[i].hasChildren = true
									} else {
										item[i].hasChildren = false
									}

								}
								that.loadIds.push(parentid) //缓存请求过的数据id
								that.loadTree[parentid] = item //缓存请求过的数据，id，data
								list = item;
								that.tree = item;
								//console.log(list)
								//console.log(that.loadTree)
								//console.log(that.loadIds)
							}
						} else {
							res.message
							uni.showModal({
								title: '提示',
								content: "获取目录列表数据失败",
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										that.tree = []
									}
								}
							});
						}
					},
					fail() {
						uni.hideLoading();
						//console.log('获取目录列表数据失败')
					}
				});
				return list
			},
			loadData(id) {
				for (var i in this.loadIds) {
					if (id == this.loadIds[i]) {
						this.tree = this.loadTree[id]
						return
					}
				}
				this.tree = this.getData(this.TabCur, id)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.all {
		padding-bottom: 68px;
		background-color: white;

		.sheng {
			margin-bottom: 10px;

			.title {
				height: 45px;
				padding: 0 16px;
				line-height: 45px;
				font-size: 15px;
				color: #606064;
			}
		}
	}

	.common {
		background-color: #fff;

		.content {
			display: flex;
			align-items: center;
			padding-left: 5px;
			border-bottom: 1px solid #fafafa;
			height: 50px;
			width: 100%;
			line-height: 50px;
			position: relative;
			font-size: 16px;

			.right {
				position: absolute;
				right: 15px;
				color: #babdc3;
				font-size: 16px;
			}

			.word {
				margin-left: 6px;
			}
		}
	}
</style>
